<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-tabs>
          <!-- 放置页签 -->
          <el-tab-pane label="角色管理">
            <!-- 新增角色按钮 -->
            <el-row style="height: 60px">
              <el-button
                v-if="assignPerm('add-but')"
                icon="el-icon-plus"
                size="small"
                type="primary"
                @click="addfn"
              >新增角色</el-button>
            </el-row>
            <!-- 表格 -->
            <el-table border="" :data="rolelist">
              <!-- 渲染 -->
              <el-table-column prop="title" label="角色名称" width="240" />
              <el-table-column prop="description" label="角色描述" />
              <el-table-column label="操作">
                <template v-slot="{ row }">
                  <el-button
                    v-if="assignPerm('allot-but')"
                    size="small"
                    type="success"
                    @click="fenpei(row.id)"
                  >分配权限</el-button>
                  <el-button
                    v-if="assignPerm('edit-but')"
                    size="small"
                    type="primary"
                    @click="editfn(row.id)"
                  >编辑</el-button>
                  <el-button
                    v-if="assignPerm('dele-but')"
                    size="small"
                    type="danger"
                    @click="delfn(row.id)"
                  >删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页组件 -->
            <el-row
              type="flex"
              justify="center"
              align="middle"
              style="height: 60px"
            >
              <el-dialog
                :title="peopleRole.id ? '编辑角色' : '新增角色'"
                :visible="showDialog"
                width="70%"
                @close="closefn"
              >
                <el-form ref="form" :rules="rules" :model="peopleRole">
                  <el-form-item label="角色名称" prop="title">
                    <el-input v-model="peopleRole.title" />
                  </el-form-item>
                  <el-form-item label="角色描述" prop="description">
                    <el-input v-model="peopleRole.description" />
                  </el-form-item>
                </el-form>
                <el-row slot="footer" type="flex" justify="center">
                  <el-col :span="6">
                    <el-button size="small" @click="closefn">取消</el-button>
                    <!-- 把按钮中的点击事件删除 -->
                    <el-button
                      size="small"
                      type="primary"
                      @click="confirm"
                    >确定</el-button>
                  </el-col>
                </el-row>
              </el-dialog>
              <!-- 分页组件 -->
              <el-pagination
                :current-page="start"
                :page-sizes="[2, 5, 15, 30]"
                :page-size="100"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </el-row>
          </el-tab-pane>
        </el-tabs>
      </el-card>
      <quanxian ref="quanxian" :show-dialog11.sync="showDialog11" />
    </div>
  </div>
</template>

<script>
import {
  getroleList,
  getroleNumber,
  addRole,
  delRole,
  getRoledetail,
  editRoledetail
} from '@/api/juese'
import quanxian from './components/quanxian'
export default {
  components: { quanxian },
  data() {
    return {
      limit: 2,
      start: 1,
      rolelist: [
        {
          title: '',
          description: ''
        }
      ],
      showDialog: false,
      showDialog11: false,
      total: 0,
      peopleRole: {
        title: '',
        description: ''
      },
      rules: {
        title: [
          { required: true, message: '角色名称不能为空', trigger: 'blur' },
          { min: 2, max: 10, message: '字符长度为2到10位', trigger: 'blur' }
        ],
        description: [
          { required: true, message: '角色描述不能为空', trigger: 'blur' },
          { min: 2, max: 50, message: '字符长度为2到50位', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    // 渲染角色列表
    this.getroleList()
    // 获取角色数量
    this.update()
  },
  methods: {
    async update() {
      this.total = await getroleNumber()
    },
    fenpei(id) {
      this.showDialog11 = true
      this.$refs.quanxian.getRoledetail(id)
    },
    async editfn(id) {
      this.showDialog = true
      this.peopleRole = await getRoledetail(id)
    },
    // 确定按钮
    async confirm() {
      // 表单验证
      await this.$refs.form.validate()
      if (this.peopleRole.id) {
        await editRoledetail(this.peopleRole)
        this.$message.success('修改成功')
      } else {
        // 新增接口
        await addRole(this.peopleRole)
        // 提示
        this.$message.success('新增成功')
      }
      // 刷新页面
      this.getroleList()
      this.update()
      // 关闭弹窗
      this.closefn()
    },
    async getroleList() {
      // 渲染页面
      const res = await getroleList({
        _limit: this.limit,
        _start: (this.start - 1) * this.limit
      })
      this.rolelist = res
    },
    // 删除角色
    delfn(id) {
      this.$confirm('是否删除角色', '删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 删除接口
          await delRole(id)
          // 刷新页面数据
          if (this.total - (this.start - 1) * this.limit === 1) {
            this.start--
          }
          this.getroleList()
          this.update()
          // 提示
          this.$message.success('删除成功')
        })
        .catch(() => {
          this.$message.info('取消删除')
        })
    },
    // 新增弹窗显示
    addfn() {
      this.showDialog = true
    },
    // 关闭弹窗
    closefn() {
      this.showDialog = false
      this.$refs.form.resetFields()
      this.peopleRole = {
        title: '',
        description: ''
      }
    },
    handleSizeChange(_limit) {
      this.limit = _limit
      this.getroleList()
    },
    handleCurrentChange(val) {
      this.start = val
      this.getroleList()
    }
  }
}
</script>

<style></style>
